//显示设备运行数据表
//这个地方特别的臃肿，最后要想办法简化！！！！！！！！！！！！！
//当不保存参数1的数据，并重画表1时，不会显示动画！！！！
function showOverView(overViewMap,overViewNameList) {
    var updateTimeList = overViewMap.updateTimes;
    var propertyLists = overViewMap.overViewDataList;
    var propertyList = new Array();
    var propertyList1 = new Array();
    var max;
    var max1;
    var stepSize;
    var stepSize1;
    var canvases=document.getElementsByTagName('canvas');
    for (var i in overViewNameList){
        propertyList = propertyLists[i].List;
        max = propertyLists[i].Result[0];
        stepSize = propertyLists[i].Result[1];
        if (i==1){
            propertyList1 = propertyList;
            max1 = max;
            stepSize1 = stepSize;
        }
        showOverViewTableHead(overViewNameList[i],i);
        showOverViewTableBody(canvases,updateTimeList,propertyList,max,stepSize,i);
    }
    showTableAgain(canvases,updateTimeList,propertyList1,max1,stepSize1,0);
}

//查询设备运行数据
function selectOverView() {
    var startDate = $("#startDate").val();
    var after = $("#after").val();
    var id = $("#enterpriceId").val();
    console.log(after+"111"+startDate+"111"+id);1
    $.ajax({
        url:"getInformation",
        type:"post",
        data:{
            "id":id,
            "startDate":startDate,
            "after":after
        },
        dataType:"json",
        success:function (data) {
            var updateTimeList = data.updateTimes;
            var propertyLists = data.overViewDataList;
            var propertyList = new Array();
            var max;
            var stepSize;
            var canvases=document.getElementsByTagName('canvas');
            for (var i in overViewNameList){
                propertyList = propertyLists[i].List;
                max = propertyLists[i].Result[0];
                stepSize = propertyLists[i].Result[1];
                showTableAgain(canvases,updateTimeList,propertyList,max,stepSize,i);
            }
        }
    })
}

//画出表体
function showOverViewTableBody(canvases,updateTimeList,propertyList,max,stepSize,i) {
    var AudienceChartCanvas = canvases[i].getContext("2d");
    AudienceChartCanvas.font="60px Arial";
    var AudienceChart = new Chart(AudienceChartCanvas, {
        type: 'bar',
        data: {
            labels: updateTimeList,
            datasets: [
                {
                    type: 'line',
                    fill: false,
                    data: propertyList,
                    borderColor: '#ff4c5b'
                },
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            layout: {
                padding: {
                    left: 0,
                    right: 0,
                    top: 20,
                    bottom: 0
                }
            },
            scales: {
                yAxes: [{
                    display: true,
                    gridLines: {
                        display: true,
                        drawBorder: false,
                        color: "#f8f8f8",
                        zeroLineColor: "#f8f8f8"
                    },
                    ticks: {
                        display: true,
                        // min: 0,
                        // max: max,
                        // stepSize: stepSize,
                        fontColor: "#b1b0b0",
                        fontSize: 15,
                        padding: 10
                    }
                }],
                xAxes: [{
                    stacked: false,
                    ticks: {
                        beginAtZero: true,
                        fontColor: "#b1b0b0",
                        fontSize: 15
                    },
                    gridLines: {
                        color: "rgba(0, 0, 0, 0)",
                        display: false
                    },
                    barPercentage: .9,
                    categoryPercentage: .7,
                }]
            },
            legend: {
                display: false
            },
            elements: {
                point: {
                    radius: 3,
                    backgroundColor: '#ff4c5b'
                }
            }
        },
    })
}

//画出图表的表头和空间
function showOverViewTableHead(overViewTableName,i) {
    $("#overView").append(
        "<div class='row' >" +
        "<div class='col-5 col-xl-11 grid-margin stretch-card' style='margin-bottom: 0px'>" +
        "<div class='row w-100 flex-grow'>" +
        "<div class='col-md-12 grid-margin stretch-card'>" +
        "<div class='card' id=''>" +
        "<div class='card-body'>" +
        "<div class='card-title'>" +    //这个地方class=overview-Table-Title总是引用不到，暂时强制格式
        "<p class='overview-Table-Title' style='font-size: 20px;margin-left: 50px;float: left' id='tableName" + i +"'>" + overViewTableName.name + "</p>" +
        "<p style='font-size: 20px;margin-left: 50px;float: left' id='tableCompany" + i +"'>"+ "单位：" + overViewTableName.company + "</p>" +
        "</div>" +
        "<div id='canvas"+ i +"'>"+
        "<canvas id='audience-chart' height='60'></canvas>" +
        "</div> "+
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>" +
        "</div>"
    )
}

//自定义查询数据
function showTableAgain(canvases,updateTimeList,propertyList,max,stepSize,i) {
    var canvas = $("#"+ "canvas" + i + "");
    canvas.empty();
    canvas.append("<canvas id='audience-chart' height='60'></canvas>" );
    showOverViewTableBody(canvases,updateTimeList,propertyList,max,stepSize,i);
}